<template>
    <div class="head">
        <div class="header">
            <div class="header-con">
                <div class="header-con-left">
                    <i class="iconfont icon-huaban"></i>
                    <span>客服电话：400-888-8888</span>
                </div>
                <div class="header-con-right">
                    <ul class="header-con-right-list">
                        <li v-for="(item,index) in lis" :key="index" @click="inxs(item,index)" :class="{section:inx==index}">{{item.name}}</li>
                    </ul>
                    <div class="header-con-right-user">
                        <p>用户:</p>
                        <span class="phone">138****891</span>
                        <span>[个人中心]</span>
                        <span>[退出]</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="head-top">
            <div class="head-top-left">
                <img src="../assets/image/xunfeng.png" alt="">
            </div>
            <div class="head-top-right">
                <ul class="head-top-right-list">
                    <li v-for="(item,index) in lists" :key="index" @click="cons(item,index)" :class="{section : con==index}">{{item.name}}</li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            con:0,
            inx:0,
            lis:[
                {name:'协议副本',to:'/Agreement'},
                {name:'流程介绍',to:'/deposit'},
                {name:'管理办法',to:'/ManagementMethod'},
                {name:'入市申请',to:'/InTheMarketFor'},
            ],
            lists:[
                {name:'首页',to:'/'},
                {name:'资产储存',to:'/personalcenter'},
                {name:'新闻资讯',to:'/information'},
                {name:'招募经济商',to:'/'},
                {name:'注册经济商',to:'/brokerd'},
                {name:'入市申请',to:'/InTheMarketFor'},
                {name:'公司介绍',to:'/CompanyIntroduction'}
            ]
        }
    },
    methods:{
        cons(item,index){
            this.con=index;
            this.$router.push(item.to)
        },
        inxs(item,index){
            this.inx=index;
            this.$router.push(item.to)
        }
    }
}
</script>
<style scoped lang="scss">
.header{
    height: 35px;
    background: #f9f9f9;
    .header-con{
        width: 1200px;
        margin: 0 auto;
        height: 35px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .header-con-left{
            font-size: 12px;
            .icon-huaban{
                color: #999;
                font-size: 12px;
            }
            span{
                color: #999;
                margin-left: 10px;
            }
        }
        .header-con-right{
            display: flex;
            align-items: center;
            .header-con-right-list{
                display: flex;
                li{
                    cursor: pointer;
                    width: 94px;
                    border-left: 1px solid #fff;
                    color: #999;
                    font-size: 0.12rem;
                    text-align: center;
                    line-height: 35px;
                }
                .section{
                    color: #ff6701;
            }
            }
            .header-con-right-user{
                font-size: 12px;
                color: #999;
                padding-left: 14px;
                display: flex;
                border-left: 1px solid #fff;
                line-height: 35px;
                .phone{
                    color: #fd6800;
                }
                span{
                    padding-left:15px;
                }
            }
        }
    }
}
.head-top{
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .head-top-left{
        width: 224px;
        height: 70px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .head-top-right{
        .head-top-right-list{
            display: flex;
            li{
                cursor: pointer;
                color: #666;
                margin-left: 40px;
            }
            .section{
                color: #ff6701;
                border-bottom: 2px solid #ff6701;
                padding-bottom: 5px;
            }
        }
    }
}
</style>
